<template>
  <div>
    <div>
      <a-layout id="components-layout-demo-custom-trigger">
        <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
          <div class="logo" />
          
          <leftmenu :menu_number='2' />

        </a-layout-sider>
        <a-layout>
          <a-layout-header style="background: #fff; padding: 0">
            
            <a-icon
              class="trigger"
              :type="collapsed ? 'menu-unfold' : 'menu-fold'"
              @click="() => (collapsed = !collapsed)"
            />
            <div style="float:right">实时在线人数：{{usernum}}</div>
            <div style="float:right">用户名：{{usersname}}</div>


          </a-layout-header>

          <a-layout-content
            :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '500px' }">
            
            <a-table bordered :data-source="dataSource" :columns="columns">

              <template slot="operation" slot-scope="text,record">
                <a-popconfirm
                  v-if="dataSource.length"
                  title="确定删除?"
                  @confirm="() => onDelete(record.uid)"
                >
                  <a href="javascript:;">删除</a>
                </a-popconfirm>
              </template>

            </a-table>
            <div>
              <Chat></Chat>
            </div>
          </a-layout-content>
        </a-layout>
      </a-layout>
    </div>
  </div>
</template>


 
<script>

// import md5 from 'js-md5';

//导入组件
import leftmenu from './leftmenu';
import { ipnum_get } from '../axios_send/api';
import Chat from './Chat'

export default {
  data () {
    return {
      msg: "这是一个变量",
      usersname:sessionStorage.getItem('username'),
      usernum:0,
      collapsed: false,
      //列
      columns:[
        {title:"uid",dataIndex:"uid"},
        {title:"username",dataIndex:"username"},
        //指定操作列
        {title:'operation',dataIndex:'operation',
        scopedSlots:{customRender:'operation'}
        }
      ],
      //数据
      dataSource:[
        {key:'1',uid:1,username:"小红"},
        {key:'2',uid:2,username:"小王"}
      ]
      
    }
  },
  //注册组件标签
  components:{

    'leftmenu':leftmenu,
    Chat,
  },
  mounted:function(){

    // var ed2020 = "2020";

    // var sign = md5('price=500&goodid=3,1'+ed2020);

    // console.log(sign);


    // var _this = this;


    // //判断浏览器是否支持websocket
    // if("WebSocket" in window){

    //    console.log("支持");
    //    //生成websocket链接
    //    var ws = new WebSocket("ws://localhost:8000/websocketlink/");

    //    //发送链接请求
    //    ws.onopen = function(){

    //       ws.send("test");

    //    }

    //    //发送消息
    //    ws.onmessage = function(evt){

    //       //将获取信息打印
    //       var received_msg = evt.data;

    //       alert(received_msg);

    //    }

    //    //捕获断开链接
    //    ws.onclose = function(){

    //       console.log("链接已经关闭");
    //    }


    // }
  
},
  methods:{

    //删除操作
    onDelete(key) {
      console.log(key);
    },
    ipnnm(){
        ipnum_get().then(res=>{
          console.log(res)
          this.usernum = res
        })
    },
  
     
  },
  mounted(){
    // window.setInterval(this.ipnnm, 5000)
      }
}


</script>
 
<style scoped>

#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}

</style>